<template>
  <div id="app">
    <transition>
      <keep-alive>
          <component :is="content[suoyin]"></component>
      </keep-alive>
    </transition>
    <div class="tabbar">
        <span  v-for="(item,index) in list" :key="index" :class="{active:suoyin == index}" @click="handleClick(index)">{{item}}</span>
  </div>
  </div>
</template>

<script>
export default {
    name: "App",
    data(){
        return{
            list:['首页','爆爆团','订单','我的'],
            suoyin : 0,
            content :['Shoplist','Tuan','Order','Mine']
        }   
    },
    methods:{
        handleClick(index){
            this.suoyin = index
        }
    }   
}
</script>

<style scoped>
  #app{
    width: 360px;
    height: 700px;
    margin: 60px auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
  }
  .tabbar{
    width: 100%;
    height: 50px;
    border-top: 1px solid #ccc;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    background-color: azure;
  }
  .tabbar span{
    display: block;
    margin-top: 25px;
    color: gray;
  }
  .tabbar span.active{
  color: rgb(23, 66, 223);
  }
</style>
